<template>
	<!-- 首页 -->
	<view class="app">
		<!-- header -->
		<view class="header">
			<!-- 顶部logo图 -->
			<top-bar></top-bar>
			
			<!-- 轮播图 -->
			<view class="banner-bar">
				<u-swiper :list="bannerList" height="400" :title="false" name="images" @click='clickBanner'></u-swiper>
			</view>
			<!-- 导航 -->
			<!-- <view class="nav-bar grid-bar">
				<view class="nav grid-item4" v-for="(item, index) in navList" :key="index" @click="clickNav(index)">
					<image class="nav-icon" :src="item.icon" mode=""></image>
					<view class="nav-text">{{item.name}}</view>
				</view>
			</view> -->
			<view class="nav-bar">
				<u-grid :col="4">
					<u-grid-item :custom-style="navItemStyle" v-for="(item, index) in navList" :key="index" @click="clickNav(index)">
						<image class="nav-icon" :src="item.icon" mode=""></image>
						<view class="nav-text">{{item.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- body -->
		<view class="body">
			<!-- 企业风采展示 -->
			<view class="section">
				<view class="section-title-bar">
					<u-section title="企业风采展示" sub-title="更多>>" :font-size="sectionFontSize" :bold="sectionBold" :show-line="false"
						:arrow="false" @click="pageTo('/pages/lhfj/xjzs')"></u-section>
				</view>
				<view class="home-qyfczs-content grid-bar">
					<view class="home-qyfczs-content-item grid-item2" v-for="(item, index) in companyList" :key="index"
						@click="clickCompany(index)">
						<image :src="item.images" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 播放视频 -->
			<u-popup v-model="showPopup" 
				mode="center" width="100%" height="600rpx" 
				@open="open" @close="close">
				<video :custom-cache="false"
					  id="myVideo"
					  :src="src"
					  :controls="controls"
					  :autoplay="autoplay"
					  style="width: 100%; height: 100%;"
					></video>
			</u-popup>
		</view>
		<!-- footer -->
		<view class="footer">
		</view>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import DEMO_NAV from "@/data/demoNav.js";
	import DEMO_BANNER from "@/data/demoBanner.js";
	import DEMO_COMPANY from "@/data/demoCompany.js";

	let $GLOBAL = getApp().globalData;

	export default {
		data() {
			return {
				disabled: false,
				topUrl: this.$resource.topUrl, // 顶部logo文字
				bannerList: [], // 轮播图
				// navList: [], // 导航
				navList: getApp().globalData.navList, // 导航
				companyList: [], // 企业风采展示
				
				navItemStyle:{
					padding: '18rpx 12rpx',
				},
				
				sectionFontSize: this.$css.sectionFontSize,
				sectionBold: this.$css.sectionBold,
				
				showPopup: false,
				videoContext: null,
				src: '',  // 视频地址
				controls: true,  // 是否显示控制条
				autoplay: false,  // 是否自动播放
			}
		},
		onLoad(options = {}) {
			this.initPage(options);
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			initPage() {
				this.getBannerList();
				this.getCompanyList();
				
				uni.$once('nav-init', () => {
					this.getNavList();
				})
			},
			// 读取轮播图列表
			getBannerList() {
				this.bannerList = DEMO_BANNER;
			},
			// 读取导航列表
			getNavList() {
				this.navList = getApp().globalData.navList;
			},
			// 读取企业列表
			getCompanyList() {
				this.companyList = DEMO_COMPANY.filter((item, index) => index<=3);
			},
			// 点击了轮播图
			clickBanner(index) {
				this.pageTo(this.bannerList[index].href);
			},
			// 点击了企业
			clickCompany(index) {
				// 播放视频
				const company = this.companyList[index];
				// vk.toast('播放视频' + company.id + '， 视频地址' + company.video_src)
				this.src = company.video_src;
				if(!this.src){
					vk.toast('未上传视频')
					return
				}
				this.open();
			},
			open(){
				this.showPopup = true;
				this.play();
			},
			close(){
				this.stop();
			},
			play(){
				this.videoContext && this.videoContext.play();
			},
			stop(){
				this.videoContext && this.videoContext.stop();
			},
			// 点击了导航
			clickNav(index) {
				const nav = this.navList[index];
				if (config.debug) console.log('点击了导航', index, nav)
				if (!nav.href) {
					vk.toast('未维护导航地址');
					return;
				}
				if (nav.type == 'inner') {
					this.pageTo(nav.href);
				} else if (nav.type == 'wap') {
					this.pageToWap(nav.href);
				} else if (nav.type == 'wxmp') {
					this.pageToMP(nav.href);
				} else {
					vk.toast('导航尚未维护' + nav.type);
					return;
				}
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 跳转到外部网站
			pageToWap(path) {
				// this.pageTo(`/pages/web_view/web_view?url=${path}`);
				location.href = path;
			},
			// 跳转到小程序
			pageToMP(appid) {
				// #ifdef MP-WEIXIN
				uni.navigateToMiniProgram({
					appId: appid,
					success(res) {
						// 打开成功
						console.log('打开成功')
					}
				})
				// #endif
				// #ifdef H5
				let appCode;
				if (appid == 'wxb85522c2bbe198bc') appCode = 'tijian';
				else if (appid == 'wx1bd7c68cb5318bf2') appCode = 'tiaojie';
				if (!appCode) {
					vk.toast('未配置小程序appid：' + appid);
					return;
				}
				this.$util.request(
						'http://api.haoyuekeji.top/http/router/plugs/lzy/weixin/client/pub.weixin.generateUrlLink', {
							appCode,
							path: '',
							query: '',
						}, 'GET')
					.then(res => {
						if (config.debug) console.log('获取小程序短链接res', res)
						if (res.code === 0) {
							location.href = res.data;
						} else {
							vk.toast(res.msg)
						}
					})
					.catch(err => {
						if (config.debug) console.log('获取小程序短链接err', err)
						vk.toast('获取小程序短链接err！' + JSON.stringify(err))
					})
				// #endif
			},
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		}
	}
</script>

<style lang="scss">
	
</style>